<!-- 设备维护历史记录 -->

<script setup>
import { ref, inject, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { RefreshRight } from '@element-plus/icons-vue'

//引入axios
const axios = inject('axios')


//文本框value值和时间响应值
const input = ref('')
const indate1 = ref('')
const indate2 = ref('')

//主页数据
const Mydata = reactive({
  "equipmentMaintenanceRecordsVOS": []
})

//发送请求时的附带数据
const Data = reactive({
  "conditions": { "equipmentNo": "", "startDate": "", "endDate": "", "type": "" }
})

//获取主页的数据
function selectData(type) {
  Data.conditions.type = type
  axios({
    method: 'post',
    url: '/api/equipmentMaintenanceTasks/selectAll2',
    data: Data.conditions
  }).then((response) => {
    console.log("response.data:")
    console.log(response.data)
    if (response.data.success) {
      if (response.data.map.equipmentMaintenanceRecordsVOS != null) {
        Mydata.equipmentMaintenanceRecordsVOS = response.data.map.equipmentMaintenanceRecordsVOS
        console.log("result:")
        console.log(response.data.map)
        console.log("Mydata.equipmentMaintenanceRecordsVOS:")
        console.log(Mydata.equipmentMaintenanceRecordsVOS)
      } else {
        ElMessageBox.alert("无设备维护任务信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
}
selectData(' ')

//刷新页面
function refresh() {
  if (Data.conditions.endDate != "" || Data.conditions.startDate != ""
    || Data.conditions.equipmentNo != "") {
    selectData("search")
  } else {
    selectData(" ")
  }
}


//表单序号自增
const indexMethod = (index) => {
  return index + 1
}

</script>

<template>
  <!-- 表格标题 -->
  <el-row style="background-color:white;margin:10px 10px 0 10px">
    <el-col :span="3" style="margin:10px 0 0 10px">设备维护历史记录</el-col>
  </el-row>
  <!-- 功能组件 -->
  <el-row style="background-color:white;margin:0 10px 0 10px">
    <el-col :span="2" style="margin:10px 0 0 10px">
      <el-button :icon="RefreshRight" @click="refresh">刷新</el-button>
    </el-col>
    <el-col :span="5" style="margin-top:10px">
      <el-date-picker v-model="Data.conditions.startDate" type="date" placeholder="维护日期开始" />
    </el-col>
    <el-col :span="5" style="margin-top:10px">
      <el-date-picker v-model="Data.conditions.endDate" type="date" placeholder="维护日期结束" />
    </el-col>
    <el-col :span="9" style="margin-top:10px;margin-left: 20px;">
      <el-input v-model="Data.conditions.equipmentNo" placeholder="请输入设备编号" />
    </el-col>
    <el-col :span="2" style="margin-top:10px">
      <el-button type="success" @click="selectData('search')">搜索</el-button>
    </el-col>
  </el-row>
  <el-row style="background-color:white;margin:0 10px 0 10px">
    <el-col :span="24" style="margin-top:15px">
      <!--:data为测试数据，可对应数据库修改  stripe斑马纹效果 border带边框 -->
      <el-table :data="Mydata.equipmentMaintenanceRecordsVOS" stripe border style="width:100%">
        <!-- 定义列表属性 prop值可对于数据库字段名修改-->
        <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="100" />
        <el-table-column label="维护设备" align="center" prop="planMaintenanceEquipment" width="100" />
        <el-table-column label="计划维护时间" align="center" prop="planTime" width="190" />
        <el-table-column label="实际维护时间" align="center" prop="actualTime" width="190" />
        <el-table-column label="维护信息" align="center">
          <template #default="scope">
            <pre class="pre">{{ scope.row.historicalMaintenanceInformation }}</pre>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<style scoped>
::v-deep .pre {
  font-size: 15px;
  font-weight: 600
}
</style>